/***********总容器***********/
.upper{
    width: 100%;
    height:130vw;
}
/***********search部分***********/
.upper .search{
    width: 100%;
    height:10vw;
    background-color: #3362a6;
    box-sizing: border-box;
    padding: 2vw;
    display: flex;
    justify-content:space-around;
    align-items: center;
}
.upper .search .search-box{
    background-color: white;
    width:88%;
    border-radius: 20px;
    height: 6vw;
    color: #c7c7c5;
    font-size: 3vw;
    display: flex;
    align-items: center;
}
.upper .search .fa-search{
    color: #c7c7c5;
    margin-left: 3vw;
    margin-right: 2vw;
}
.upper .search .fa-bars{
    color: white;
    font-size: 5vw;
}
/***********主要功能部分***********/
.upper .main-function{
    background-color: #3362a6;
    width: 100%;
    height:15vw;
    display: flex;
    justify-content:space-around;
    align-items: center;
    box-sizing: border-box;
    padding: 2vw;
}
.upper .main-function li{
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
}
.upper .main-function li img{
    width: 8vw;
    height: 8vw;
    user-select: none;/*让文本选中状态无效*/
    cursor: pointer;
}
.upper .main-function li p{
    color: white;
    font-size: 3vw;
    margin-top: 1vw;
    user-select: none;/*让文本选中状态无效*/
    cursor: pointer;
}
/***********功能分类部分***********/
.upper .wrapper{
    height:71vw;
    width:100%;
    box-sizing: border-box;
    padding: 5vw;
}
.upper .wrapper .all-function{
    background-color:white;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 5vw;
}
.upper .wrapper .all-function li{
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;

}
.upper .wrapper .all-function li img{
    width: 17vw;
    height: 17vw;
    box-sizing: border-box;
    padding: 2vw;
}
.upper .wrapper .all-function li p{
    margin-bottom: 2vw;
    font-size: 3.5vw;
}
/***********消息部分***********/
.upper .center{
    width:100%;
    height:100%;
    background-color: #eff0f4;
    box-sizing: border-box;
    padding: 5vw;
}
.upper .center li{
    margin-bottom: 5vw;
}
.upper .center .center1{
    background-color: white;
    border-radius: 10px;
}
.upper .center .center1 .center1-content1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    cursor: pointer;
}
.upper .center .center1 .center1-content1 .center1-content1-left{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.upper .center .center1 .center1-content1 .center1-content1-left h3{
    font-size: 4vw;
    font-weight: 700;
    margin:4vw 4vw;
}
.upper .center .center1 .center1-content1 .center1-content1-left p:last-child{
    margin:4vw 4vw;
    font-size: 3vw;
}
.upper .center .center1 .center1-content1 .center1-content1-right{
    font-size: 6vw;
    color:#888;
    margin-right: 8vw;
}
.upper .center .center1 .line{
    width:100%;
    height:0.2vw;
    background-color:#999
}
.upper .center .center1 .center1-content2{
    display: flex;
    align-items: center;
}
.upper .center .center1 .center1-content2 img{
    height:100px;
    width:100px;
    margin:0.5vw 2vw;
    border-radius: 5px;
}
.upper .center .center1 .center1-content2 .center1-content2-right h3{
    font-weight: 100;
    margin-bottom: 4vw;
}
.upper .center .center1 .center1-content2 .center1-content2-right p{
    margin-left: 40vw;
    color: #888888;
    font-size: 3vw;
}
.upper .center .center1 .center1-content2 .img2 img{
    height:90%;
    width:90%;
    box-sizing: border-box;
    padding: 1vw;
}
.upper .center .center1 .center1-content2 .img3 img{
    height:90%;
    width:90%;
    box-sizing: border-box;
    padding: 1vw;
}
/**********底部***********/
.upper .bottom{
    width:100%;
    height:8vw;
    background-color: white;

    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.upper .bottom li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.upper .bottom li img{
    width:5vw;
    height:5vw;
    border-radius: 20px;
    user-select: none;/*让文本选中状态无效*/
    cursor: pointer;
}
.upper .bottom li p{
    font-size: 2vw;
    user-select: none;/*让文本选中状态无效*/
    cursor: pointer;
}
.upper .bottom li .bottom-icon{
    margin-top: -5vw;
    margin-left: 3vw;

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
